<template>
  <div>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane 
    v-for="(item, index) in tabsList.filter(item2 => item2.show)"
    :label="item.name" 
    :name="String(item.component)"></el-tab-pane>
  </el-tabs>
  <div v-for="(item, index) in tabsList.filter(item2 => item2.show)">
  <div style="border-left: 3px solid #409EFF; padding: 0 0 0 15px; margin-bottom: 15px;">
    {{ index === 0 ? '' : item.name }}
  </div>
    <component :is="item.component" :info="info" :company-id="companyId" :id="item.component" />
   </div>
  </div>
</template>
<script>
import Qualifications from '@/views/retrievalNumber/info/sub/pages/qualifications.vue'
import Project from '@/views/retrievalNumber/info/sub/pages/project.vue'
import Concat from '@/views/retrievalNumber/info/sub/pages/concat.vue'
import Engineer from '@/views/retrievalNumber/info/sub/pages/engineer.vue'
export default {
  name: 'SubNavTabs',
  components: { Qualifications, Project, Concat, Engineer },
  props: {
    tabsList: { type: Array, default: null },
    activeName: { type: String, default: '' },
    companyId: { type: String, default: '' },
    info: { type: Object, default: null }
  },
  data() {
    return {
       activeTab: "Qualifications"
    }
  },
  methods: {
    // handleClick(tab){
    //   this.activeNames = tab.name
    // },
    handleTabClick(tab) {
      this.activeTab = tab.name;
      const targetElement = document.getElementById(tab.name);
      if (targetElement) {
        targetElement.scrollIntoView({  
           behavior: 'smooth',
        block: 'end' // 或者 'center' 或 'end' 根据需要 });
      })}
    },
  }
}
</script>
<style scoped>
.content-section {
  min-height: 600px;
  padding: 20px;
  margin: 10px 0;
  background: #f9f9f9;
}
::v-deep .el-tabs__item{
  /*height: 50px;*/
  /*line-height: 50px;*/
  font-size: 15px;
}
::v-deep .el-tabs--card>.el-tabs__header{
  background-color: #FAFBFD;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
  border-top: 2px solid;
}
::v-deep .el-tabs__nav-wrap{
  margin-bottom: -3px;
}
</style>
